<% if @field.value %>
  <turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" loading=<%= turbo_frame_loading %> target="_top" class="block">
    <%= render(Avo::LoadingComponent.new(title: @field.name)) %>
  </turbo-frame>
<% else %>
  <%= render Avo::PanelComponent.new(name: @field.name) do |c| %>
    <% c.with_tools do %>
      <% if can_attach? %>
        <%= a_link attach_path,
          icon: 'heroicons/outline/link',
          color: :primary,
          style: :text,
          data: {
            turbo_frame: Avo::MODAL_FRAME_ID,
            target: :attach
          } do %>
          <%= t('avo.attach_item', item: @field.name.humanize(capitalize: false)) %>
        <% end %>
      <% end %>
      <% if can_see_the_create_button? %>
        <%= a_link create_path,
          icon: 'heroicons/outline/plus',
          'data-target': 'create',
          'data-turbo-frame': '_top',
          style: :primary,
          color: :primary do %>
          <%= t('avo.create_new_item', item: @field.name.humanize(capitalize: false) ) %>
        <% end %>
      <% end %>
    <% end %>

    <% c.with_body do %>
      <div class="py-8 flex justify-center items-center">
        <%= empty_state by_association: params[:related_name].present? %>
      </div>
    <% end %>
  <% end %>
<% end %>
